<template>
	<div id="allorder">
			<div class="refund">
				<div @click="alertPop($event)" type="refundType" v-if="status==2">
					<label>退款类型</label>
					<p>{{refundTypeText}}</p>
					<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more_b.png" alt="">
				</div>
                <div type="refundTypeNo"  v-if="status==1">
                    <label>退款类型</label>
                    <p>我要退款（无需退货）</p>
                </div>
				<div @click="alertPop($event)" type="refundReason">
					<label>退款原因</label>
					<p>{{refundReasonText}}</p>
					<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more_b.png" alt="">
				</div>
				<div type="refundMoney">
					<label>退款金额</label>
					<p><span style="color:#9948c3;font-size: .28rem;">￥{{topMoney}}</span>(最多￥{{topMoney}},含发货邮费￥0元)</p>
				</div>
			</div>
			<div class="explain">
				<div>
					<p>退款说明</p>
					<p>最多输入100字（选填）</p>
				</div>
				<div class="inpexplain">
					<textarea  placeholder="请详细填写退款说明" v-model="info"></textarea>
				</div>
			</div>
			<div class="tel">
				<p>联系电话</p>
				<input type="tel" placeholder="请输入手机号码" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="mobile">
			</div>
			<div style="padding: .1rem 0;background: #f6f6f6"></div>
			<div class="certificate">
				<div>
					<p>上传凭证</p>
					<p>（最多三张）</p>
				</div>
			</div>
			<div class="uploadContainer">
				<div class="uploadImg">
					<label id="first" @click="uploadsImg($event)"></label>
				</div>
				<div class="uploadImg">
					<label id="second" @click="uploadsImg($event)"></label>
				</div>
				<div class="uploadImg">
					<label id="third" @click="uploadsImg($event)"></label>
				</div>
			</div>
			<div class="sibmitBtn">
				<button @click="submit">提交申请</button>
			</div>
            <v-alert :style="newPosition" :context="context" v-if="showAlert"></v-alert>
			<div class="wrapper" :style="styleObject" v-if="show" @click="hidePop"></div>
			<div class="reasonList" v-if="refundType">
				<ul>
					<li @click="getRefundType(1,$event)"><img :src="refundTypeNum==1?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>我要退款（无需退货）</span></li>
					<li @click="getRefundType(2,$event)"><img :src="refundTypeNum==2?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>我要退款（退款退货）</span></li>
				</ul>
			</div>
			<div class="reasonList" v-if="refundReason">
			<ul>
				<li @click="getRefundReason(1,$event)"><img :src="refundReasonNum==1?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>多拍、错拍、不想要</span></li>
				<li @click="getRefundReason(2,$event)"><img :src="refundReasonNum==2?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>协商一致退款</span></li>
				<li @click="getRefundReason(3,$event)"><img :src="refundReasonNum==3?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>缺货</span></li>
				<li @click="getRefundReason(4,$event)"><img :src="refundReasonNum==4?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>其他</span></li>
			</ul>
		</div>
			<!--<div class="reasonList" v-if="refundMoney">-->
			<!--<ul>-->
				<!--<li @click="getRefundMoney(2,$event)"><img :src="refundMoneyNum==2?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>全额退款</span></li>-->
				<!--<li @click="getRefundMoney(1,$event)"><img :src="refundMoneyNum==1 ?'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/checked_c.png':'https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/unselected_c.png'" ><span>手动输入</span></li>-->
			<!--</ul>-->
		<!--</div>-->

		    <!--<div class="textOpac" v-if="text">-->
        	<!--<input type="number" placeholder="请输入退款金额" class="inp" v-model="money">-->
        	<!--<div class="sBtn">-->
        	    <!--<button @click="goLast" style="border-right:1px solid #e6e6e6">取消</button>-->
        	    <!--<button @click="goSucc">确定</button>-->
        	<!--</div>-->
    	<!--</div>-->
		<!--<div class="textOpac" v-if="showText">-->
        	<!--<p style="font-size:.32rem;color:#323232;padding: 20% 0;">提现金额有误</P>-->
    	<!--</div>-->
	</div>
</template>

<script>
    import share from "../share/share.js";
    import config from "../config/config.js";
    import Alert from "../alert.vue";
	export default{
	    data(){
	        return{
                styleObject:{
                  width:'100%',
				  height:'',
				  position:'absolute',
				  background:'#000',
				  opacity:'0.5',
				  top:'0',
				  left:'0'
				},
                text:false,
                refundType:false,
              refundTypeNo:false,
                refundReason:false,
                refundMoney:false,
				showText:false,
                list:[],
                refundTypeNum:0,
				refundTypeText:'点击选择',
                refundReasonNum:0,
                refundReasonText:'点击选择',
                refundMoneyNum:2,
                refundMoneyText:'请选择金额',
                info:'',
                mobile:'',
				topMoney:'',
                money:'',
                imgs:[],
                context:'',
                showAlert:false,
                newPosition:'position:fixed;top:40%;',
              status:Boolean,
			}
		},
        components:{
            "v-alert":Alert
        },
        methods:{
			goSucc(){
			    if(parseFloat(this.money)>parseFloat(this.topMoney)){
                    this.showText = true
				}else{
                    this.refundMoneyText=parseFloat(this.money);
                    this.hidePop()
				}
			},
			goLast(){
				this.hidePop()
			},
            uploadsImg($event){
                var that=this;
                var id=$event.currentTarget.getAttribute('id');
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: function (res) {
                        var localIds = res.localIds;
                        var UploadsImg=document.createElement('div'),
                            img=document.createElement('img'),
                            closeX=document.createElement('span');
                        closeX.setAttribute('style','background:url(https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/close_d.png);position: absolute;top: -.15rem;right: -.15rem;width: .34rem;height: .34rem;background-size:cover;');
                        img.setAttribute('src',localIds[0]);
                        img.setAttribute('style','width: 1.18rem;height: 1.18rem;border-radius: .08rem;');
                        UploadsImg.setAttribute('style','position: absolute;top: -1px;left: -1px;width: 1.18rem;height: 1.18rem;');
                        UploadsImg.appendChild(img);
                        UploadsImg.appendChild(closeX);
                        document.getElementById(id).appendChild(UploadsImg);
                        wx.uploadImage({
                            localId:localIds[0],
                            isShowProgressTips: 1,
                            success: function (res) {
                                var serverId = res.serverId;
                                that.imgs.push(serverId);
                                closeX.onclick=function($event){
                                    $event.stopPropagation();
                                    var __self=this;
                                    __self.parentNode.parentNode.removeChild(__self.parentNode);
                                    that.imgs.pop(serverId);
                                }
                            }
                        });
                    }
                });
            },
			alertPop($event){
                var type=$event.currentTarget.getAttribute('type');
                if(type=='refundType'){
                    this.refundType=true;
                    this.show=true;
				}else if(type=='refundTypeNo'){
                  this.refundType=false;
                  this.show=false;
                  this.type=1;
                }else if(type=='refundReason'){
                    this.refundReason=true;
                    this.show=true;
				}else{
                    this.refundMoney=true;
                    this.show=true;
				}

			},
			hidePop(){
                this.refundType=false;
                this.refundReason=false;
                this.refundMoney=false;
                this.show=false;
                this.text=false;
                this.showText=false;
			},
            getRefundType(num,$event){
			    this.refundTypeNum=num;
			    this.refundTypeText=$event.currentTarget.getElementsByTagName('span')[0].innerHTML;
			    this.hidePop();

			},
			getRefundReason(num,$event){
                this.refundReasonNum=num;
                this.refundReasonText=$event.currentTarget.getElementsByTagName('span')[0].innerHTML;
                this.hidePop();
			},
			getRefundMoney(num,$event){
                this.refundMoneyNum=num;
                if(num==1){
					this.refundMoney=false;
					this.text=true;
				}else{
                    this.hidePop();
                    this.refundMoneyText=$event.currentTarget.getElementsByTagName('span')[0].innerHTML;
                    this.money=''
				}
			},
			submit(){
                var _self=this;
                var reg=/^1[0-9]{10}$/;
                if(this.refundReasonText=='点击选择'){
                    this.showAlert=true;
                    this.context='请完善退款信息';
                    setTimeout(()=>{_self.showAlert=false},2000)
                }else if(!reg.test(this.mobile)){
                    this.showAlert=true;
                    this.context='请填写正确的手机号码';
                    setTimeout(()=>{_self.showAlert=false},2000)
				}else{
                    if(_self.$route.params.Btype=='UPDATE_REFUND'){
                        var obj={
                            orderid:_self.$route.params.orderid,
                            reason:_self.refundReasonText,
                            type:_self.refundTypeNum,
                            info:_self.info,
                            mobile:_self.mobile,
                            imgs:_self.imgs,
                            money_type:2,
                            bt_type:_self.$route.params.Btype,
                            id:localStorage.getItem('id')
                        }
                    }else if(_self.status==1){
                      var obj={
                        orderid:_self.$route.params.orderid,
                        reason:_self.refundReasonText,
                        type:1,
                        info:_self.info,
                        mobile:_self.mobile,
                        imgs:_self.imgs,
                        money_type:2,
                        bt_type:_self.$route.params.Btype
                      }
                    }else{
                        var obj={
                            orderid:_self.$route.params.orderid,
                            reason:_self.refundReasonText,
                            type:_self.refundTypeNum,
                            info:_self.info,
                            mobile:_self.mobile,
                            imgs:_self.imgs,
                            money_type:2,
                            bt_type:_self.$route.params.Btype
                        }
                    }
                }
                this.PushRefund(obj)
			},
            PushRefund(obj){
			    if(obj.id){
                    var value=JSON.stringify({"orderid":obj.orderid,"reason":obj.reason,"type":obj.type,"info":obj.info,"mobile":obj.mobile,"money":obj.money,"imgs":obj.imgs,"money_type":obj.money_type,"bt_type":obj.bt_type,"id":obj.id,"token":localStorage.getItem('token')}),
                        key=demo(value);
				}else{
                    var value=JSON.stringify({"orderid":obj.orderid,"reason":obj.reason,"type":obj.type,"info":obj.info,"mobile":obj.mobile,"money":obj.money,"imgs":obj.imgs,"money_type":obj.money_type,"bt_type":obj.bt_type,"token":localStorage.getItem('token')}),
                        key=demo(value);
				}
                axios.post('/Home/Refund/PushRefund',{
                    value:value,
                    key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            this.$router.push('/allorder/flow/'+obj.orderid);
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
            ShowUpdataRefund(orderid,type){
                var value=JSON.stringify({"orderid":orderid,"type":type,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/refund/ShowUpdataRefund',{
                    value:value,
                    key:key
                },config)
                    .then(function(response) {
						if(response.data.code==200){
                          this.status = response.data.data.status;
						    if(response.data.data.id){
						        localStorage.setItem('id',response.data.data.id);
						        this.refundTypeNum=response.data.data.type;
                                response.data.data.type==1?this.refundTypeText='我要退款（无需退货）':this.refundTypeText='我要退款（退款退货）'
						        this.refundReasonText=response.data.data.reason;
                                this.info=response.data.data.desc;
                                this.mobile=response.data.data.mobile;
                                this.refundMoneyNum=response.data.data.money_type;
                                this.refundMoneyText=response.data.data.topMoney;
                                this.money=response.data.data.topMoney;
                                this.topMoney=response.data.data.topMoney;
                                this.status = response.data.data.status;
							}else{
                                this.topMoney=response.data.data.topMoney;
                              this.status = response.data.data.status;
							}
						}
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			}
        },
	    activated(){
            var windowH=document.getElementById('allorder').offsetHeight;
            this.styleObject.height=windowH+'px';
            var orderid=this.$route.params.orderid,
				type=this.$route.params.Btype;
            this.ShowUpdataRefund(orderid,type);
            share({})
		},
		deactivated(){
	        this.$destroy(true)
		}
    }
</script>

<style>

</style>